<template>
  <view id="cart">
    <u-navbar
      leftIconColor="#fff"
      :autoBack="true"
      bgColor="#00c7db"
      :titleStyle="titlStyle"
      title="购物车"
    >
    </u-navbar>
    <view class="cart_content">
      <view class="cart_info" v-if="totalNum">
        <view class="p_number">
          <view class="p_number_left">
            <p>用餐人数:{{ peopleList.p_num }}</p>
            <p>
              备注:<span v-if="!peopleList.p_mark">无</span
              ><span v-if="peopleList.p_mark">{{ peopleList.p_mark }}</span>
            </p>
          </view>
          <view @click="toMenuHome" class="p_number_right">
            <u--image
              height="1.5rem"
              width="1.5rem"
              :src="edit"
              mode="aspectFit"
            ></u--image>
            <p>修改</p>
          </view>
        </view>
        <view class="cart_p_num">
          <p>购物车中总共有{{ totalNum }}个菜</p>
          <p>
            合计：<span class="price">¥{{ allPrice }}</span>
          </p>
        </view>
      </view>
      <view class="cart_list" v-if="totalNum">
        <ul>
          <li class="item" v-for="(item, key) in list" :key="key">
            <view class="left_food">
              <img :src="item.img" />
              <view class="food_info">
                <p>{{ item.title }}</p>
                <p class="price">¥{{ item.pic }}</p>
              </view>
            </view>
            <view id="right_cart">
              <view class="cart_num">
                <view class="input_left" @click="decNum(item, key)">-</view>
                <view class="input_center">
                  <input
                    type="text"
                    readonly="readonly"
                    v-model="item.num"
                    name="num"
                    id="num"
                  />
                </view>
                <view class="input_right" @click="incNum(item)">+</view>
              </view>
            </view>
          </li>
        </ul>
      </view>
      <view class="hot_food">
        <h3>本店顾客最长点的菜</h3>

        <view class="item_list_outer">
          <ul class="item_list">
            <li>
              <view class="inner">
                <img src="https://picsum.photos/200/300?r=1" />
                <p class="title">大蒜腊肉</p>
                <p class="price">¥26</p>
              </view>
            </li>

            <li>
              <view class="inner">
                <img src="https://picsum.photos/200/300?r=2" />

                <p class="title">家乡扣肉</p>

                <p class="price">¥26</p>
              </view>
            </li>

            <li>
              <view class="inner">
                <img src="https://picsum.photos/200/300?r=3" />
                <p class="title">大蒜腊肉</p>
                <p class="price">¥26</p>
              </view>
            </li>

            <li>
              <view class="inner">
                <img src="https://picsum.photos/200/300?r=4" />

                <p class="title">家乡扣肉</p>

                <p class="price">¥26</p>
              </view>
            </li>

            <li>
              <view class="inner">
                <img src="https://picsum.photos/200/300?r=5" />

                <p class="title">家乡扣肉</p>

                <p class="price">¥26</p>
              </view>
            </li>
          </ul>
        </view>
      </view>

      <view v-if="!totalNum" class="cart_empty"
        >您的购物车空空的，点击菜单开始点菜</view
      >
    </view>

    <NavFooter></NavFooter>
    <view id="footer_book" @click="toMenu" class="footer_book">
      <u--image
        height="1.5rem"
        width="1.5rem"
        :src="menu"
        mode="aspectFit"
      ></u--image>
      <p>菜单</p>
    </view>

    <view @click="addOrder()" id="footer_cart" class="footer_cart">
      <u--image
        height="1.5rem"
        width="1.5rem"
        :src="doorder"
        mode="aspectFit"
      ></u--image>
      <p>下单</p>
    </view>
  </view>
</template>


<script>
//引入NavFooter组件
import NavFooter from "@/components/NavFooter/index.vue";
import {
  peopleInfoList,
  getGoodsCartList,
  postShopOrderAdd,
  decCart,
  incCart,
  showToast
} from "@/common/api.js";
export default {
  components: {
    NavFooter,
  },
  data() {
    return {
      menu: require("@/static/images/pages/menu/menu.png"),
      edit: require("@/static/images/pages/menu/edit.png"),
      doorder: require("@/static/images/pages/menu/doorder.png"),
      titlStyle: {
        color: "#ffffff",
      },
      list: [],
      peopleList: [],
      allPrice: 0,
      totalNum: 0,
    };
  },
  onShow() {
    this.getPeopleInfoList();
    this.getCartData();
    this.socketOn();
  },
  methods: {
    socketOn() {
      let that = this;
      that.$socket.on("addcart", function (data) {
        that.getPeopleInfoList();
        that.getCartData();
      });
    },
    toMenuHome() {
      setTimeout(() => {
        uni.$u.route({
          url: "pages/index/index",
          type: "reLaunch",
        });
        this.$store.dispatch("changeNavBar", "menu");
      }, 1000);
    },
    toMenu() {
      uni.$u.route(`/pages/orderHome/index`);
    },
    async getCartData() {
      let res = await getGoodsCartList({ uid: uni.getStorageSync("roomid") });
      if (res.code == 200) {
        this.list = res.data.list;
        this.getTotalResult();
      }
    },
    async decNum(item, key) {
      let res = await decCart({
        uid: uni.getStorageSync("roomid"),
        goods_id: item.goods_id,
        num: item.num,
      });
      if (res.code == 200) {
        if (item.num == 1) {
          //删除当前购物车的这条数据
          this.list.splice(key, 1);
        } else {
          --item.num;
        }
        this.$socket.emit("addcart", {
          time: +new Date(),
        });
        this.getTotalResult();
      }
    },
    async incNum(item) {
      let res = await incCart({
        uid: uni.getStorageSync("roomid"),
        goods_id: item.goods_id,
        num: item.num,
      });
      if (res.code == 200) {
        this.$socket.emit("addcart", {
          time: +new Date(),
        });
        ++item.num;
        this.getTotalResult();
      }
    },
    /*获取总数量 以及总价格*/
    getTotalResult() {
      var allPrice = 0;
      var totalNum = 0;
      for (var i = 0; i < this.list.length; i++) {
        allPrice += parseFloat(this.list[i].pic * this.list[i].num);
        totalNum += this.list[i].num;
      }
      this.allPrice = allPrice;
      this.totalNum = totalNum;
    },
    //获取用餐人的信息
    async getPeopleInfoList() {
      let res = await peopleInfoList({ uid: uni.getStorageSync("roomid") });
      if (res.code == 200) {
        this.peopleList = res.data[0];
      }
    },
    async addOrder() {
      //提交订单
      let uid = uni.getStorageSync("roomid");
      let p_num = this.peopleList.p_num;
      let p_mark = this.peopleList.p_mark;
      let total_price = this.allPrice;
      let total_num = this.totalNum;
      let order = this.list;

      let params = {
        uid,
        p_num,
        p_mark,
        total_price,
        total_num,
        order,
      };
      let res = await postShopOrderAdd(params);
      if (res.code == 200) {
        uni.$u.route(`/pages/order/foodOrder`);
      }else{
        showToast('服务器出了点问题')
      }
     
    },
  },
};
</script>

<style lang="scss">
.cart_content {
  padding: 1rem;
  margin: 90rpx 0 0 0;
  /*头部信息*/
  .cart_info {
    background: #fff;

    h2 {
      text-align: center;
      font-size: 1.8rem;
      padding: 0.8rem 0px;
      border-bottom: 1px solid #eee;
    }
    border-radius: 0.5rem;
    padding: 0.5rem;
    .p_number {
      display: flex;

      padding: 0.5rem 0;
      border-bottom: 1px solid #eee;

      .p_number_left {
        flex: 1;

        p {
          line-height: 2;

          &:first-child {
            color: red;
          }
        }
      }

      .p_number_right {
        width: 4rem;
        height: 4rem;
        text-align: center;

        /deep/ .u-image {
          margin: 0 auto;
        }
      }
    }

    /*购物车总数量*/

    .cart_p_num {
      border-bottom: 1px solid #eee;
      p {
        line-height: 2;

        .price {
          font-size: 2.4rem;
          color: red;
        }
      }
    }
  }
  /*购物车列表*/

  .cart_list {
    margin-top: 1rem;

    padding: 0.5rem;

    background: #fff;

    border-radius: 0.5rem;

    display: flex;

    ul {
      width: 100%;

      .item {
        display: flex;
        width: 100%;

        border-bottom: 1px solid #eee;

        padding: 1rem 0px;
        .left_food {
          flex: 1;

          display: flex;
          img {
            width: 4rem;
            height: 4rem;
            border-radius: 10%;
            margin-right: 0.8rem;
          }

          .food_info {
            flex: 1;
          }
        }

        .right_cart {
          width: 10rem;
        }
      }
    }
  }

  /*最长点的菜*/

  .hot_food {
    background: #fff;

    margin-top: 1rem;

    border-radius: 0.5rem;

    margin-bottom: 4rem;

    h3 {
      font-size: 1.4rem;

      padding: 0.5rem 0px;
    }

    .item_list_outer {
      width: 100%;

      overflow-x: auto;
      .item_list {
        padding: 0px 0.5rem;
        width: 50rem;

        li {
          width: 8rem;
          padding: 0.5rem;
          box-sizing: border-box;
          float: left;

          .inner {
            background: #fff;
            width: 100%;
            border-radius: 0.5rem;
            overflow: hidden;

            img {
              width: 100%;
              height: 180rpx;
            }
          }
        }
      }
    }
  }
}

/*购车加减*/
.cart_num {
  width: 10rem;

  display: flex;
  margin-top: 0.8rem;

  .input_left,
  .input_right {
    flex: 1;

    width: 2.8rem;
    height: 2.8rem;

    line-height: 2.8rem;

    text-align: center;

    color: red;

    border: 1px solid #eee;

    font-size: 2.4rem;
  }

  .input_center {
    flex: 1;

    input {
      width: 2rem;
      text-align: center;
      width: 100%;
      height: 2.8rem;
      border: none;

      border-top: 1px solid #eee;

      border-bottom: 1px solid #eee;

      float: left;
    }
  }
}

/*购车空*/

.cart_empty {
  text-align: center;
  line-height: 3;

  h3 {
    font-size: 1.8rem;
  }
}
.footer_nav {
  background: #00c7db;
  color: #fff;
  left: 2.7rem;
}

.footer_cart {
  background: red;
  color: #fff;
  left: inherit;
  right: 0.5rem;
}
</style>